<template>
	<div class="headerTop" :style="{
      height: $pageSchema[0].pageSetup.titleHeight + 'px',
    }">
		<!-- 左半部分 -->
		<div class="lef" v-show="$pageSchema[0].pageSetup.isBack">
			<i class="el-icon-arrow-left"></i>
		</div>
		<!-- 标题 -->
		<div class="header-title" :style="{
        height: $pageSchema[0].pageSetup.titleHeight + 'px',
        'line-height': $pageSchema[0].pageSetup.titleHeight + 'px',
      }">
			{{ $pageSchema[0].pageSetup.name }}
		</div>
		<!-- 右半部分 -->
		<div class="rig">
			<el-avatar :size="25" icon="el-icon-user-solid" v-show="$pageSchema[0].pageSetup.isPerson"> </el-avatar>

		</div>
	</div>
</template>

<script>
	import {
		mapState
	}
	from 'vuex'
	export default {
		name: 'headerTop',
		computed: {
			...mapState(['$pageSchema', '$rightcom', '$currentproperties'])
		},
	}
</script>

<style lang="less" scoped>
	.headerTop {
		width: 100%;
		height: 35px;
		background: #fff;
		display: flex;
		// padding: 0 5px;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		border-bottom: 1px solid #f7f8fa;
		position: relative;
		padding: 0px 10px;

		/* 左边 */
		.lef {

			width: 40px;
			text-align: center;
			line-height: 35px;


			// position: absolute;
			// left: 18px;
			// top: 50%;
			// transform: translateY(-50%);

			/* 图标 */
			span {
				color: #000;
				font-weight: 400;
				font-size: 12px;
			}
		}

		.header-title {
			width: 100%;
			text-align: center;
			font-size: 14px;
			line-height: 35px;
			color: #333333;
		}

		/* 右边 */
		.rig {
			width: 40px;

			// display: flex;
			// align-items: center;
			// height: 100%;
			// position: absolute;
			// right: 18px;
			// top: 50%;
			// transform: translateY(-50%);
		}
	}
</style>